<template>
  <!-- 成绩详情 -->
  <div v-loading="loading" class="gl_pb_20">
    <div class="gl_my_15">
      <el-input v-model="Api_GET_TrainExaminerScoreMyCertificateQO.Filter" style="width:20%" suffix-icon="el-icon-search" clearable placeholder="搜索" size="mini" @change="getMessageList()" />
    </div>
    <div v-if="tableData.length > 0">
      <el-table size="mini" class="notice_table" :data="tableData">
        <el-table-column type="index" label="序号" align="center" width="50" />
        <el-table-column label="考试科目名称">
          <template slot-scope="{row}">
            <span>{{ row.subjectName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="成绩状态" align="left" :width="110">
          <template slot-scope="{ row }">
            <span v-if="row.approveStatusCode === 'ApproveSuccess'" class="gl_color_success">
              <i class="el-icon-success" />
              <span class="gl_pl_5">{{ row.approveStatusName }}</span>
            </span>
            <span v-else-if="row.approveStatusCode === 'ApproveFailed'" class="gl_color_error">
              <i class="el-icon-success" />
              <span class="gl_pl_5">{{ row.approveStatusName }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="证书等级">
          <template slot-scope="{row}">
            <span>{{ row.certificateLevelName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="证书编号">
          <template slot-scope="{row}">
            <span>{{ row.certificateNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="分数">
          <template slot-scope="{row}">
            <span>{{ row.score || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="考试官">
          <template slot-scope="{row}">
            <span>{{ row.examinerName }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-else class="gl_noData">
      <p>暂无数据</p>
    </div>
    <el-row class="gl_pt_20" style="text-align: center;">
      <el-pagination
        :current-page="Api_GET_TrainExaminerScoreMyCertificateQO.Page"
        :page-size="Api_GET_TrainExaminerScoreMyCertificateQO.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
  </div>
</template>
<script>
import { api_GET_TrainExaminerScoreMyCertificate } from '@/extend/api/trainswaggerApi/app.js';
import { Api_GET_TrainExaminerScoreMyCertificateQO } from '@/lib/form/train/swaggerForm';

export default {
  data() {
    return {
      Api_GET_TrainExaminerScoreMyCertificateQO: new Api_GET_TrainExaminerScoreMyCertificateQO(),
      loading: false,
      totalPage: 0,
      tableData: [],
      trainningId: '',
      registerId: ''
    };
  },
  created() {
    this.trainningId = this.$route.query.trainningId;
    this.registerId = this.$route.query.registerId;
    this.getMessageList();
  },
  methods: {
    getMessageList(page) {
      this.loading = true;
      this.Api_GET_TrainExaminerScoreMyCertificateQO.TrainningId = this.trainningId;
      this.Api_GET_TrainExaminerScoreMyCertificateQO.RegisterId = this.registerId;
      this.Api_GET_TrainExaminerScoreMyCertificateQO.Page = page || 1;
      this.Api_GET_TrainExaminerScoreMyCertificateQO.SkipCount = (this.Api_GET_TrainExaminerScoreMyCertificateQO.Page - 1) * this.Api_GET_TrainExaminerScoreMyCertificateQO.MaxResultCount;
      api_GET_TrainExaminerScoreMyCertificate(this.Api_GET_TrainExaminerScoreMyCertificateQO).then(res => {
        this.tableData = res.items;
        this.totalPage = res.totalCount;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    // 分页
    sizeChange(MaxResultCount) {
      this.Api_GET_TrainExaminerScoreMyCertificateQO.MaxResultCount = MaxResultCount;
      this.getMessageList();
    },
    pageIndexChange(currentPage) {
      this.getMessageList(currentPage);
    }
  }
};
</script>
<style scoped>
.el-table {
  border: none;
}
.el-table::before {
  background-color: #ffffff;
}
.el-table /deep/ th{
  border-right: none;
  background: #ffffff;
}
.el-table /deep/ thead th{
  background: #ffffff;
}
.el-table /deep/ td {
  border-right: none;
  font-size: 14px;
}
.title {
  cursor: pointer;
}
.title:hover{
  color: #1890ff;
  text-decoration: underline;
}
.notice_table {
  border-top: 1px solid #dfe6ec;
  border-right: none !important;
}
</style>
